<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>商品</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">

    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <!--引入图标库-->
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">-->

    <link rel="stylesheet" href="elementUI/elementCSS.css"/>
    <!--    &lt;!&ndash;引入element的图标库&ndash;&gt;-->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->

    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/xiangqing.css">
    <script src="js/jquery.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<!--头部-->
<div id="app" v-cloak>

    <!--头部-->
    <nav class="navbar">
        <div class="nav-container" style="width: 100%;position: relative;">
            <a href="book.html" class="brand">首页</a>
            <ul class="nav-links">
                <li><a href="dingdan.html"><i class="bi bi-clipboard-data"></i> 我的订单</a></li>
                <li><a href="gouwuche.html">我的购物车</a></li>
                <li><a href="myborrow.html">借书记录</a></li>
                <li><a href="#">我的收藏</a></li>
                <li><a href="gonggao.html">系统公告(5)</a></li>
                <li><a href="wenda.html">问答(5)</a></li>
                <li style="margin-left: 100px;">
                    <img @click="show_alter_info" style="width: 32px;cursor: pointer;" :src="user.profile" alt="">
                </li>
                <li><a href="zhuye.html">主页</a></li>
                <li @click="logout">退出登录</li>
            </ul>
        </div>
    </nav>
    <!--头部end-->


    <!--搜索栏-->
    <div class="toub_beij">
        <div class="logo"><a href="index.html"><img src="./images/店铺/logo4.jpg"
                                                    style="width: 255px;height: 95px;"></a>
        </div>
        <div class="search">
            <input type="text" placeholder="美妆一折抢" class="text" id="textt">
            <button class="button">搜索</button>
        </div>
        <div class="right">
            <i class="gw-left"></i>
            <i class="gw-right"></i>
            <div class="sc">
                <i class="gw-count">0</i>
                <i class="sd"></i>
            </div>
            <a href="gouw_che.html">我的购物车</a>
            <div class="dorpdown-layer">
                <ul>
                    <li class="meiyou">
                        <img src="./images/settleup-nogoods.png">
                        <span>购物车中还没有商品，赶紧选购吧！</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="submena clearfix">
        <a href="book.html">首页</a>
        <span>></span>
        <a href=" ">书籍详情</a>
    </div>

    <!--"id": 21,
    "bookname": "文学:2016:春夏卷",
    "price": 35,
    "num": 0,
    "jianjie": "一部汇集多位名家的文学作品集，展示2016年春夏的文学面貌。",
    "borrownum": 0,
    "url": "dataimg/文学2016春夏卷.jpg",
    "author": "陈思和/王德威"
    "cbs": "上海文艺出版社",-->
    <div class="center_con clearfix">
        <div class="main_menu fl">
            <img :src="book.url" style="width: 400px;height: 300px;">
        </div>
        <div class="goods_detail_list fr">
            <h3>{{book.bookname}}</h3>
            <p>{{book.jianjie}}</p>
            <div class="prize_bar">
                <div class="show_prize fl"><em>¥{{book.price}}</em></div>
                <div class="show_unit fl">库存量：{{book.num}}</div>
            </div>
            <div class="goods_num clearfix">
                <div class="num_name fl">数量：</div>
                <div class="num_add fl">
                    <input type="text" class="num_show fl" v-model="selectedNum">
                    <button class="add fr" @click="addnum">+</button>
                    <button class="minus fr" @click="jiannum">-</button>
                </div>
            </div>
            <div class="total">总价：<em>¥{{tatalValue}}</em></div>
            <div class="operate_btn">
                <button class="buy_btn">立即购买</button>
                <button class="add_cart" @click="addgouwuche">加入购物车</button>
            </div>
        </div>
    </div>
</div>
<!--
<div class="beij_center">
    <div class="jiar_gouw_c_beij2">
        <div class="guk">顾客评价</div>
        <div class="guk2">目前暂时没有评价</div>
        <div class="guk3">写评价</div>
    </div>
</div>
-->
<!-- 引入 jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.9.14/dist/layui.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/vue@2.js"></script>
<!-- 引入 Axios 库 -->
<script src="js/axios.min.js"></script>
<script src="elementUI/elementJS.js"></script>
<script src="js/data.js"></script>
<script src="js/pulblicfuntion.js"></script>


<script>
    var xiangqing = new Vue({
            el: '#app',
            data() {
                return {
                    //当前的图书信息
                    book: {
                        "id": 0,
                        "bookname": "",
                        "price": 0,
                        "num": 0,
                        "jianjie": "",
                        "borrownum": 0,
                        "url": "",
                        "cbs": "",
                        "author": ""
                    },
                    // 用户 信息
                    user: {},
                    //选择数量
                    selectedNum: 0,
                    tatalValue: 0

                }
            },
            computed: {
                selectedNumWatcher() {
                    // 在计算属性中返回需要监听的值
                    return this.selectedNum;
                }
            },
            watch: {
                selectedNumWatcher(newValue, oldValue) {
                    if (newValue > this.book.num) {
                        layer.msg('库存不足', {icon: 2, time: 1000});
                        this.selectedNum = this.book.num;
                    }
                    this.tatalValue = this.selectedNum * this.book.price;
                }
            },
            created() { // 读取登录用户信息
                axios.get(urlluodeng + '/user/getLoginUser').then((response) => {
                    if (!response.data.result) {
                        alert(response.data.msg);
                        /*  setTimeout(() => {
                              window.location.href = 'login.html';
                          }, 1000);*/
                    } else {
                        this.user = response.data.userData;
                        //用户信息获取成功后，获取数据
                        // 调用 getRouterParams 函数获取 URLSearchParams 对象
                        const params = getRouterParams();
                        this.getBookInfo(params.get('id'));
                    }
                });

            }
            ,
            methods: {
                addgouwuche() {
                    if (this.selectedNum === 0) {
                        layer.msg('请选择数量', {icon: 2, time: 1000});
                    } else {
                        let DataGouwuche = new FormData();
                        DataGouwuche.append('bookid', this.book.id);
                        DataGouwuche.append('user', this.user.username);
                        DataGouwuche.append('totalprice', this.tatalValue);
                        DataGouwuche.append('selectnum', this.selectedNum);
                        axios.post(urlluodeng + '/gouwuche/addGouwuche', DataGouwuche).then((response) => {
                            if (response.data.result) {
                                layer.msg(response.data.msg, {icon: 1, time: 1000});
                            } else {
                                layer.msg(response.data.msg, {icon: 2, time: 1000});
                            }
                        }).catch((error) => {
                            console.log(error);
                            layer.msg(response.data.msg, {icon: 2, time: 1000});
                        });
                    }

                }, addnum() {
                    if (this.book.num == 0) {
                        layer.msg('库存不足，请选择其他商品', {icon: 2, time: 1000});
                    } else {
                        if (this.selectedNum !== this.book.num) {
                            this.selectedNum++;
                        }
                    }
                },
                jiannum() {
                    if (this.selectedNum !== 0) {
                        this.selectedNum--;
                    }
                }
                ,
                //根据id获取图书信息
                async getBookInfo(id) {
                    try {
                        // 发送请求并等待其完成
                        const res = await axios.get(urlluodeng + '/book/getbookbyid?id=' + id);
                        console.log("图书信息获取成功：");
                        console.log(res.data);
                        this.book = res.data.data;
                        this.tatalValue = this.book.price;
                    } catch (err) {
                        console.log(err);
                        layer.msg('图书信息获取失败，请稍后再试', {icon: 2, time: 1000});
                    }
                }
                ,
                show_alter_info() {
                    showUserAvatar(this.user);
                }
                ,
                logout() {
                    logout();
                }
            }

        })
    ;

</script>

</body>
</html>
